<template>
  <div class="app-container">
    <el-card>
      <el-tabs v-model="activeTab">
        <el-tab-pane label="计时收费" name="jishiCharging">
          <el-form ref="jishiChargingForm" :model="jishiChargingForm" :rules="jishiChargingRules" label-width="100px"
                   size="mini"
                   style="width: 600px">
            <el-form-item label="计时价格：" prop="price">
              <el-input-number v-model="jishiChargingForm.price" controls-position="left" :min="0" :precision="2"
                               :step="0.01"
                               size="small"></el-input-number>
              <el-select v-model="jishiChargingForm.unit" style="width: 100px;margin-left: 10px">
                <el-option label="元/分钟" :value="0"></el-option>
                <!--                <el-option label="元/30分钟" :value="1"></el-option>-->
                <!--                <el-option label="元/小时" :value="2"></el-option>-->
              </el-select>
            </el-form-item>
            <el-form-item label="押金：" prop="deposit">
              <el-input-number v-model="jishiChargingForm.deposit" controls-position="left" :min="0" :precision="2"
                               :step="0.01"
                               size="small"></el-input-number>
              <span style="margin-left: 10px">元</span>
            </el-form-item>
            <el-form-item label="规则描述:" prop="description">
              <el-input
                type="textarea"
                :rows="3"
                placeholder="请输入内容"
                v-model="jishiChargingForm.description"
                maxlength="50"
                show-word-limit
              >
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="mini" @click="submitjishiChargingForm">保存</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="套餐收费" name="taocanCharge">
          <div>
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-plus"
              style="margin-bottom: 10px"
              @click="showTaocanAddDialog"
            >新增套餐
            </el-button>
            <el-row :gutter="20">
              <el-col :span="8" v-for="(item, index) in taocanList" :key="item.taocanId">
                <el-card :body-style="{ padding: '10px' }">
                  <div class="taocan-el-card">
                    <img :src="item.picture" style="width: 180px;height: 180px;object-fit: contain" alt=""/>
                    <div class="taocan-detail">
                      <div class="taocan-title">
                        <span>{{ item.name }}</span>
                      </div>
                      <div class="taocan-desc common-text">
                        <span>套餐说明：</span>
                        <div>
                        <span
                          style="margin-left: 20px">{{ item.description }}</span>
                        </div>
                      </div>
                      <div class="taocan-duration common-text">
                        <span>套餐时长：{{ item.duration }}分钟</span>
                      </div>
                      <div class="taocan-deposit common-text">
                        <span>套餐押金：{{ item.deposit }}元</span>
                      </div>
                      <div class="taocan-price common-text">
                        <span>套餐价格：{{ item.price }}元</span>
                      </div>
                      <div class="taocan-deposit common-text">
                        <span>超时计费规则：{{ item.overtimeFeeRule }}元/分钟</span>
                      </div>
                      <div class="taocan-button">
                        <el-button type="text" @click="showTaocanEditDialog(item)">编辑</el-button>
                        <el-button type="text" @click="deleteTaocan(item)">删除</el-button>
                      </div>
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
        <el-tab-pane label="拼团类型" name="pintuanType">
          <div>
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-plus"
              style="margin-bottom: 10px"
              @click="showPintuanTypeAddDialog"
            >新增拼团类型
            </el-button>
            <el-row :gutter="20">
              <el-col :span="8" v-for="(item, index) in pintuanList" :key="item.pintuanId">
                <el-card :body-style="{ padding: '10px' }">
                  <div class="taocan-el-card">
                    <img :src="item.picture" style="width: 180px;height: 180px;object-fit: contain" alt=""/>
                    <div class="taocan-detail">
                      <div class="taocan-title">
                        <span>{{ item.name }}</span>
                      </div>
                      <div class="taocan-desc common-text">
                        <span>套餐说明：</span>
                        <div>
                        <span
                          style="margin-left: 20px">{{ item.description }}</span>
                        </div>
                      </div>
                      <div class="taocan-duration common-text">
                        <span>拼团人数：{{ item.personNum }}</span>
                      </div>
                      <div class="taocan-duration common-text">
                        <span>游玩时长：{{ item.duration }}分钟</span>
                      </div>
                      <div class="taocan-price common-text">
                        <span>单人价格：{{ item.price }}元</span>
                      </div>
                      <div class="taocan-deposit common-text">
                        <span>单人押金：{{ item.deposit }}元</span>
                      </div>
                      <div class="taocan-button">
                        <el-button type="text" @click="showPintuanEditDialog(item)">编辑</el-button>
                        <el-button type="text" @click="deletePintuan(item)">删除</el-button>
                      </div>
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <!-- 添加或修改套餐对话框 -->
    <el-dialog
      :title="taocanAddOrEditDialogTitle"
      :visible.sync="taocanAddOrEditDialogVisible"
      width="600px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :before-close="beforeTaocanDialogCloseCallback"
      @close="handleTaocanDialogClose"
    >
      <el-form ref="taocanForm" :model="taocanForm" :rules="taocanRules">
        <el-form-item v-if="taocanForm.taocanId" label="套餐ID:" :label-width="taocanFormLabelWidth" prop="taocanId">
          <el-input v-model="taocanForm.taocanId" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="套餐名称:" :label-width="taocanFormLabelWidth" prop="name">
          <el-input v-model="taocanForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="套餐说明:" :label-width="taocanFormLabelWidth" prop="description">
          <el-input
            type="textarea"
            :rows="3"
            placeholder="请输入内容"
            v-model="taocanForm.description"
            maxlength="50"
            show-word-limit
          >
          </el-input>
        </el-form-item>
        <el-form-item label="套餐时长:" :label-width="taocanFormLabelWidth" prop="duration">
          <el-input-number v-model="taocanForm.duration" controls-position="right" :min="1"
                           size="small"></el-input-number>
          <span style="margin-left: 10px">分钟</span>
        </el-form-item>
        <el-form-item label="套餐押金:" :label-width="taocanFormLabelWidth" prop="deposit">
          <el-input-number v-model="taocanForm.deposit" controls-position="right" :min="0" :precision="2" :step="0.01"
                           size="small"></el-input-number>
          <span style="margin-left: 10px">元</span>
        </el-form-item>
        <el-form-item label="套餐价格:" :label-width="taocanFormLabelWidth" prop="price">
          <!--          <el-input-number v-model="taocanForm.price" controls-position="right" :min="1" size="small"></el-input-number>-->
          <el-input-number v-model="taocanForm.price" controls-position="right" :min="0" :precision="2" :step="0.01"
                           size="small"></el-input-number>
          <span style="margin-left: 10px">元</span>
        </el-form-item>
        <el-form-item label="超时计费规则:" label-width="120px" prop="overtimeFeeRule">
          <el-input-number v-model="taocanForm.overtimeFeeRule" controls-position="right" :min="0" :precision="2"
                           :step="0.01"
                           size="small"></el-input-number>
          <span style="margin-left: 10px">元/分钟</span>
        </el-form-item>
        <el-form-item label="套餐图片:" :label-width="taocanFormLabelWidth" prop="picture">
          <el-upload
            ref="taocanPicUpload"
            class="upload-demo pic-upload"
            action="#"
            :file-list="taocanPicList"
            :show-file-list="true"
            :auto-upload="false"
            list-type="picture-card"
            accept=".jpg,.jpeg,.png"
            :limit="1"
            :on-exceed="imageListSizeExceed"
            :before-upload="beforeImageUpload"
            :http-request="handleTaocanPicUpload"
            :on-preview="handleImagePreview"
            :on-remove="handleTaocanPicRemove"
            :on-change="handleTaocanPicChange"
          >
            <i class="el-icon-plus avatar-uploader-icon"></i>
            <div slot="tip" class="el-upload__tip">
              提示：最多只允许上传1个文件，且要求文件必须为jpg/png格式，大小不超过5MB;
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleTaocanCancelAddOrEdit">取 消</el-button>
        <el-button type="primary" @click="handleTaocanAddOrEdit">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 添加或修改拼团类型对话框 -->
    <el-dialog
      :title="pintuanTypeAddOrEditDialogTitle"
      :visible.sync="pintuanTypeAddOrEditDialogVisible"
      width="600px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :before-close="beforePintuanDialogCloseCallback"
      @close="handlePintuanDialogClose"
    >
      <el-form ref="pintuanTypeForm" :model="pintuanTypeForm" :rules="pintuanRules" label-position="left">
        <el-form-item v-if="pintuanTypeForm.pintuanId" label="拼团类型ID:" :label-width="pintuanFormLabelWidth"
                      prop="pintuanId">
          <el-input v-model="pintuanTypeForm.pintuanId" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="拼团类型名称:" :label-width="pintuanFormLabelWidth" prop="name">
          <el-input v-model="pintuanTypeForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="拼团类型说明:" :label-width="pintuanFormLabelWidth" prop="description">
          <el-input
            type="textarea"
            :rows="3"
            placeholder="请输入内容"
            v-model="pintuanTypeForm.description"
            maxlength="50"
            show-word-limit
          >
          </el-input>
        </el-form-item>
        <el-form-item label="拼团人数:" label-width="100px" prop="personNum">
          <el-input-number v-model="pintuanTypeForm.personNum" controls-position="right" :min="1"
                           size="small"></el-input-number>
        </el-form-item>
        <el-form-item label="游玩时长:" label-width="100px" prop="duration">
          <el-input-number v-model="pintuanTypeForm.duration" controls-position="right" :min="1"
                           size="small"></el-input-number>
          <span style="margin-left: 10px">分钟</span>
        </el-form-item>
        <el-form-item label="单人价格:" label-width="100px" prop="price">
          <el-input-number v-model="pintuanTypeForm.price" controls-position="right" :min="0" :precision="2"
                           :step="0.01"
                           size="small"></el-input-number>
          <span style="margin-left: 10px">元</span>
        </el-form-item>
        <el-form-item label="单人押金:" label-width="100px" prop="deposit">
          <el-input-number v-model="pintuanTypeForm.deposit" controls-position="right" :min="0" :precision="2"
                           :step="0.01"
                           size="small"></el-input-number>
          <span style="margin-left: 10px">元</span>
        </el-form-item>
        <el-form-item label="展示图片:" label-width="100px" prop="picture">
          <el-upload
            ref="pintuanPicUpload"
            class="upload-demo pic-upload"
            action="#"
            :file-list="pintuanPicList"
            :show-file-list="true"
            :auto-upload="false"
            list-type="picture-card"
            accept=".jpg,.jpeg,.png"
            :limit="1"
            :on-exceed="imageListSizeExceed"
            :before-upload="beforeImageUpload"
            :http-request="handlePintuanPicUpload"
            :on-preview="handleImagePreview"
            :on-remove="handlePintuanPicRemove"
            :on-change="handlePintuanPicChange"
          >
            <i class="el-icon-plus avatar-uploader-icon"></i>
            <div slot="tip" class="el-upload__tip">
              提示：最多只允许上传1个文件，且要求文件必须为jpg/png格式，大小不超过5MB;
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handlePintuanCancelAddOrEdit">取 消</el-button>
        <el-button type="primary" @click="handlePintuanAddOrEdit">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="imgPreviewDialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
import oss from "@/utils/oss";
import store from '@/store'
import {addTaocan, delTaocan, getTaocan, listTaocan, updateTaocan} from "@/api/system/taocan";
import {addPintuan, delPintuan, getPintuan, listPintuan, updatePintuan} from "@/api/system/pintuan"
import {addJishi, getJishi, updateJishi} from "@/api/system/jishi"

export default {
  name: "TaocanSetting",
  data() {
    let validateTaocanPic = (rule, value, callback) => {
      let tempTaocanPicListLength = this.tempTaocanPicList.length;
      console.log("validateTaocanPic tempTaocanPicListLength: ", tempTaocanPicListLength)
      if (tempTaocanPicListLength === 0) {
        callback(new Error('套餐图片必须上传'));
      } else {
        callback();
      }
    };
    let validatePintuanPic = (rule, value, callback) => {
      let tempPintuanPicListLength = this.tempPintuanPicList.length;
      console.log("validateTaocanPic tempPintuanPicListLength: ", tempPintuanPicListLength)
      if (tempPintuanPicListLength === 0) {
        callback(new Error('拼团类型图片必须上传'));
      } else {
        callback();
      }
    };
    return {
      activeTab: "jishiCharging",
      jishiChargingForm: {
        description: "",
        price: 0,
        unit: 0,
        deposit: 0
      },
      jishiChargingRules: {
        price: [
          {required: true, message: "计时价格不能为空", trigger: "blur"},
          {type: 'number', message: '计时价格必须为数字值', trigger: "blur"}
        ],
        deposit: [
          {required: true, message: "押金不能为空", trigger: "blur"},
          {type: 'number', message: '押金必须为数字值', trigger: "blur"}
        ],
        description: [
          {required: true, message: "规则描述不能为空", trigger: "blur"}
        ]
      },
      // 表单校验
      taocanRules: {
        name: [
          {required: true, message: "套餐名称不能为空", trigger: "blur"}
        ],
        description: [
          {required: true, message: "套餐描述不能为空", trigger: "blur"}
        ],
        duration: [
          {required: true, message: "套餐时长不能为空", trigger: "blur"},
          {type: 'number', message: '套餐时长必须为数字值', trigger: "blur"}
        ],
        price: [
          {required: true, message: "套餐价格不能为空", trigger: "blur"},
          {type: 'number', message: '套餐价格必须为数字值', trigger: "blur"}
        ],
        deposit: [
          {required: true, message: "套餐押金不能为空", trigger: "blur"},
          {type: 'number', message: '套餐押金必须为数字值', trigger: "blur"}
        ],
        picture: [
          {validator: validateTaocanPic, trigger: 'blur'}
        ],
        overtimeFeeRule: [
          {required: true, message: "超时计费规则不能为空", trigger: "blur"},
          {type: 'number', message: '超时计费规则必须为数字值', trigger: "blur"}
        ]
      },
      // 表单校验
      pintuanRules: {
        name: [
          {required: true, message: "拼团类型名称不能为空", trigger: "blur"}
        ],
        description: [
          {required: true, message: "拼团类型描述不能为空", trigger: "blur"}
        ],
        personNum: [
          {required: true, message: "拼团人数不能为空", trigger: "blur"},
          {type: 'number', message: '拼团人数必须为数字值', trigger: "blur"}
        ],
        duration: [
          {required: true, message: "单人时长不能为空", trigger: "blur"},
          {type: 'number', message: '单人时长必须为数字值', trigger: "blur"}
        ],
        price: [
          {required: true, message: "单人价格不能为空", trigger: "blur"},
          {type: 'number', message: '单人价格必须为数字值', trigger: "blur"}
        ],
        deposit: [
          {required: true, message: "单人押金不能为空", trigger: "blur"},
          {type: 'number', message: '单人押金必须为数字值', trigger: "blur"}
        ],
        picture: [
          {validator: validatePintuanPic, trigger: 'blur'}
        ]
      },
      currentDate: new Date(),
      taocanAddOrEditDialogTitle: "添加套餐",
      pintuanTypeAddOrEditDialogTitle: "添加拼团类型",
      taocanAddOrEditDialogVisible: false,
      pintuanTypeAddOrEditDialogVisible: false,
      taocanForm: {},
      pintuanTypeForm: {},
      taocanList: [], //套餐列表
      pintuanList: [], //拼团类型列表
      taocanFormLabelWidth: '100px',
      pintuanFormLabelWidth: '120px',
      taocanPicList: [],
      tempTaocanPicList: [],
      pintuanPicList: [],
      tempPintuanPicList: [],
      dialogImageUrl: '',
      imgPreviewDialogVisible: false,
      taocanQueryParam: {},
      pintuanQueryParam: {},
      jishiQueryParam: {},
    }
  },
  mounted() {
    let scenicId = store.getters.scenicId;
    if (scenicId) {
      this.taocanQueryParam.scenicId = scenicId;
      this.pintuanQueryParam.scenicId = scenicId;
      this.jishiQueryParam.scenicId = scenicId;
      this.getTaocanList(this.taocanQueryParam);
      this.getPintuanList(this.pintuanQueryParam);
      this.getJishiRule(this.jishiQueryParam);
    }
  },
  methods: {
    getJishiRule(jishiQueryParam) {
      getJishi(jishiQueryParam).then(res => {
        console.log("getJishiRule res: ", res)
        this.jishiChargingForm = res.data;
        this.jishiChargingForm.unit = parseInt(res.data.unit);
      }).catch(err => {
        console.log("getJishiRule err: ", err)
      })
    },
    //获取包船套餐列表
    getTaocanList(taocanQueryParam) {
      listTaocan(taocanQueryParam).then(res => {
        console.log("listTaocan res: ", res)
        let data = res.data;
        if (data && data.length > 0) {
          this.taocanList = data.map(item => {
            item.picture = oss.signatureUrl(item.picture)
            return item;
          });
        } else {
          this.taocanList = []
        }

      }).catch(err => {
        console.log("listTaocan err: ", err)
      })
    },
    //获取包船套餐列表
    getPintuanList(pintuanQueryParam) {
      listPintuan(pintuanQueryParam).then(res => {
        console.log("getPintuanList res: ", res)
        let data = res.data;
        if (data && data.length > 0) {
          this.pintuanList = data.map(item => {
            item.picture = oss.signatureUrl(item.picture)
            return item;
          });
        }

      }).catch(err => {
        console.log("listTaocan err: ", err)
      })
    },
    submitjishiChargingForm() {
      this.$refs["jishiChargingForm"].validate(valid => {
        if (valid) {
          this.jishiChargingForm.scenicId = store.getters.scenicId;
          console.log("submitjishiChargingForm jishiChargingForm: ", this.jishiChargingForm)
          if (this.jishiChargingForm.jishiId) { //更新计时收费规则
            updateJishi(this.jishiChargingForm).then(res => {
              this.$message.success("更新成功!")
            }).catch(err => {
              this.$message.error("更新失败!")
            })
          } else { //新增计时收费规则
            addJishi(this.jishiChargingForm).then(res => {
              this.$message.success("保存成功!")
            }).catch(err => {
              this.$message.error("保存失败!")
            })
          }

        }
      });
    },
    submitTaocanForm() {

    },
    elcardBodyStyle() {
      return {
        padding: "55px"
      }
    },
    beforeImageUpload(file) {
      // 限制上传类型
      const fileExtensions = this.getFileSuffixName(file.name) === '.jpg' || this.getFileSuffixName(file.name) === '.jpeg'
        || this.getFileSuffixName(file.name) === '.png'
      //限制文件大小上限为5M
      const max5M = file.size / 1024 / 1024 < 5;
      if (!fileExtensions) {
        this.$message.error('只能上传.jpg, .jpeg, .png格式的图片!');
      }
      if (!max5M) {
        this.$message.error('上传图片大小不能超过 5MB!');
      }
      return fileExtensions && max5M;
    },
    imageListSizeExceed() {
      this.$message.error('最多只允许上传1张图片 !');
    },
    getFileNameUUID() {
      function rx() {
        return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
      }

      return `${+new Date()}_${rx()}${rx()}`
    },
    getFileSuffixName(name) {
      return name.substring(name.lastIndexOf("."));//.txt
    },
    //处理包船套餐图片的上传，此方法需返回promise，否则上传的图片不会显示为上传成功的状态。
    handleTaocanPicUpload(option) {
      console.log("handleTaocanPicUpload option: ", option)
      console.log("handleTaocanPicUpload this.taocanPicList: ", this.taocanPicList)
      //异步上传
      return new Promise((resolve, reject) => {
        let fileName = "";
        if (this.taocanForm.taocanId) { //更新套餐
          fileName = this.taocanForm.picture;
        } else { //新增套餐
          // 生成的文件名，保留文件后缀名，进行拼接
          fileName = "taocanPictures/" + this.getFileNameUUID() + this.getFileSuffixName(option.file.name)
        }
        oss.put(fileName, option.file).then(res => {
          //上传成功
          console.log("套餐图片上传oss成功！res: ", res)
          // debugger
          this.taocanForm.picture = fileName;
          this.taocanForm.scenicId = store.getters.scenicId;
          if (this.taocanForm.taocanId) { //更新套餐
            updateTaocan(this.taocanForm).then(res => {
              console.log("更新套餐信息到数据库成功！")
              this.$message.success("更新成功！")
              this.getTaocanList({
                scenicId: this.taocanForm.scenicId
              })
              this.resetTaocanForm();
              resolve()
            }).catch(err => {
              console.log("更新套餐信息到数据库失败！err: ", err)
              this.$message.error("更新失败！")
              oss.deleteOne(fileName); //将已上传到oss服务器的图片删掉
              this.resetTaocanForm();
              reject()
            })
          } else { //新增套餐
            addTaocan(this.taocanForm).then(res => {
              console.log("添加套餐信息到数据库成功！")
              this.$message.success("添加成功！")
              this.getTaocanList({
                scenicId: this.taocanForm.scenicId
              })
              this.resetTaocanForm();
              resolve()
            }).catch(err => {
              console.log("添加套餐信息到数据库失败！err: ", err)
              this.$message.error("添加失败！")
              oss.deleteOne(fileName); //将已上传到oss服务器的图片删掉
              this.resetTaocanForm();
              reject()
            })
          }
        }).catch(err => {
          console.log("套餐图片上传oss失败！err: ", err)
          this.$message.error("添加失败！")
          this.resetTaocanForm();
          reject()
        });
      })
    },
    //处理拼船图片的上传，此方法需返回promise，否则上传的图片不会显示为上传成功的状态。
    handlePintuanPicUpload(option) {
      //异步上传
      return new Promise((resolve, reject) => {
        let fileName = "";
        if (this.pintuanTypeForm.pintuanId) { //更新拼团类型
          fileName = this.pintuanTypeForm.picture;
        } else { //新增拼团类型
          // 生成的文件名，保留文件后缀名，进行拼接
          fileName = "pintuanPictures/" + this.getFileNameUUID() + this.getFileSuffixName(option.file.name)
        }
        oss.put(fileName, option.file).then(res => {
          //上传成功
          console.log("拼团类型图片上传oss成功！res: ", res)
          // debugger
          this.pintuanTypeForm.picture = fileName;
          this.pintuanTypeForm.scenicId = store.getters.scenicId;
          if (this.pintuanTypeForm.pintuanId) { //更新拼团类型
            updatePintuan(this.pintuanTypeForm).then(res => {
              console.log("更新拼团类型到数据库成功！")
              this.$message.success("更新成功！")
              this.getPintuanList({
                scenicId: this.pintuanTypeForm.scenicId
              })
              this.resetPintuanForm();
              resolve()
            }).catch(err => {
              console.log("更新拼团类型到数据库失败！err: ", err)
              this.$message.error("更新失败！")
              oss.deleteOne(fileName); //将已上传到oss服务器的图片删掉
              this.resetPintuanForm();
              reject()
            })
          } else { //新增拼团类型
            addPintuan(this.pintuanTypeForm).then(res => {
              console.log("添加拼团类型到数据库成功！")
              this.$message.success("添加成功！")
              this.getPintuanList({
                scenicId: this.pintuanTypeForm.scenicId
              })
              this.resetPintuanForm();
              resolve()
            }).catch(err => {
              console.log("添加拼团类型到数据库失败！err: ", err)
              this.$message.error("添加失败！")
              oss.deleteOne(fileName); //将已上传到oss服务器的图片删掉
              this.resetPintuanForm();
              reject()
            })
          }
        }).catch(err => {
          console.log("拼团类型图片上传oss失败！err: ", err)
          this.$message.error("添加失败！")
          this.resetTaocanForm();
          reject()
        });
      })
    },
    handleTaocanPicRemove(file, fileList) {
      console.log(file, fileList);
      this.tempTaocanPicList = fileList;
    },
    handlePintuanPicRemove(file, fileList) {
      this.tempPintuanPicList = fileList;
    },
    handleImagePreview(file) {
      console.log("handleImagePreview file: ", file)
      this.dialogImageUrl = file.url;
      this.imgPreviewDialogVisible = true;
    },
    showTaocanAddDialog() {
      this.taocanAddOrEditDialogVisible = true;
      this.taocanAddOrEditDialogTitle = "添加套餐"
    },
    showPintuanTypeAddDialog() {
      this.pintuanTypeAddOrEditDialogVisible = true;
      this.pintuanTypeAddOrEditDialogTitle = "添加拼团类型"
    },
    handleTaocanAddOrEdit() {
      this.$refs["taocanForm"].validate(valid => {
        if (valid) {
          this.taocanAddOrEditDialogVisible = false;
          console.log("handleTaocanAddOrEdit this.taocanPicList: ", this.taocanPicList)
          console.log("handleTaocanAddOrEdit this.tempTaocanPicList: ", this.tempTaocanPicList)
          let isTaocanPicNotModified = false;
          this.tempTaocanPicList.forEach(item => {
            if (item.status === "success") isTaocanPicNotModified = true;
          })
          if (!isTaocanPicNotModified) { //图片被修改，需上传图片和套餐信息
            this.$refs.taocanPicUpload.submit();
          } else {//图片未被修改，只需更新套餐信息
            if (this.taocanForm.taocanId) { //更新套餐信息
              updateTaocan(this.taocanForm).then(res => {
                console.log("更新套餐信息到数据库成功！")
                this.$message.success("更新成功！")
                this.getTaocanList({
                  scenicId: this.taocanForm.scenicId
                })
                this.resetTaocanForm();
              }).catch(err => {
                console.log("更新套餐信息到数据库失败！err: ", err)
                this.$message.error("更新失败！")
                this.resetTaocanForm();
              })
            }
          }
        }
      });
    },
    handlePintuanAddOrEdit() {
      this.$refs["pintuanTypeForm"].validate(valid => {
        if (valid) {
          this.pintuanTypeAddOrEditDialogVisible = false;
          let isPintuanPicNotModified = false;
          this.tempPintuanPicList.forEach(item => {
            if (item.status === "success") isPintuanPicNotModified = true;
          })
          if (!isPintuanPicNotModified) { //图片被修改，需上传图片和拼团类型
            this.$refs.pintuanPicUpload.submit();
          } else {//图片未被修改，只需更新拼团类型
            if (this.pintuanTypeForm.pintuanId) { //更新拼团类型
              updatePintuan(this.pintuanTypeForm).then(res => {
                console.log("更新拼团类型到数据库成功！")
                this.$message.success("更新成功！")
                this.getPintuanList({
                  scenicId: this.pintuanTypeForm.scenicId
                })
                this.resetPintuanForm();
              }).catch(err => {
                console.log("更新拼团类型到数据库失败！err: ", err)
                this.$message.error("更新失败！")
                this.resetPintuanForm();
              })
            }
          }
        }
      });
    },
    handleTaocanCancelAddOrEdit() {
      this.taocanAddOrEditDialogVisible = false;
      this.resetTaocanForm();
    },
    handlePintuanCancelAddOrEdit() {
      this.pintuanTypeAddOrEditDialogVisible = false;
      this.resetPintuanForm();
    },
    beforeTaocanDialogCloseCallback(done) {
      // this.$confirm("确认关闭当前对话框？").then(res => {
      //   done();
      // }).catch(err => {
      // })
      this.resetTaocanForm();
      done();
    },
    beforePintuanDialogCloseCallback(done) {
      // this.$confirm("确认关闭当前对话框？").then(res => {
      //   done();
      // }).catch(err => {
      // })
      this.resetPintuanForm();
      done();
    },
    handleTaocanDialogClose() {
      console.log("handleTaocanDialogClose execute.")
      this.$refs.taocanPicUpload.clearFiles();
      this.tempTaocanPicList = [];
    },
    handlePintuanDialogClose() {
      this.$refs.pintuanPicUpload.clearFiles();
      this.tempPintuanPicList = [];
    },
    handleTaocanPicChange(file, fileList) {
      this.tempTaocanPicList = fileList;
    },
    handlePintuanPicChange(file, fileList) {
      this.tempPintuanPicList = fileList;
    },
    // 套餐表单重置
    resetTaocanForm() {
      this.taocanForm = {};
      this.resetForm("taocanForm");
    },
    // 套餐表单重置
    resetPintuanForm() {
      this.pintuanTypeForm = {};
      this.resetForm("pintuanTypeForm");
    },
    showTaocanEditDialog(taocan) {
      this.taocanAddOrEditDialogVisible = true;
      this.taocanAddOrEditDialogTitle = "编辑套餐"
      getTaocan(taocan.taocanId).then(res => {
        console.log("showTaocanEditDialog res: ", res)
        this.taocanForm = res.data;
        this.taocanPicList = [
          {
            name: this.taocanForm.picture,
            url: oss.signatureUrl(this.taocanForm.picture)
          }
        ];
        this.tempTaocanPicList = this.taocanPicList;
      })

    },
    showPintuanEditDialog(pintuanType) {
      this.pintuanTypeAddOrEditDialogVisible = true;
      this.pintuanTypeAddOrEditDialogTitle = "编辑拼团类型"
      getPintuan(pintuanType.pintuanId).then(res => {
        console.log("showPintuanEditDialog res: ", res)
        this.pintuanTypeForm = res.data;
        this.pintuanPicList = [
          {
            name: this.pintuanTypeForm.picture,
            url: oss.signatureUrl(this.pintuanTypeForm.picture)
          }
        ];
        this.tempPintuanPicList = this.pintuanPicList;
      })
    },
    deleteTaocan(taocan) {
      console.log("deleteTaocan taocan: ", taocan)
      let picture = taocan.picture;
      let filename = picture.substring(picture.indexOf("taocanPictures"), picture.indexOf("?")); //示例：taocanPictures/1691043780457_95bebec1.jpg
      console.log("deleteTaocan filename: ", filename)
      this.$confirm(`确认要删除'${taocan.name}'吗？`).then(res => {
        oss.deleteOne(filename).then(res => {
          delTaocan(taocan.taocanId).then(res => {
            this.$message.success("删除成功！")
            this.getTaocanList(this.taocanQueryParam)
          }).catch(err => {
            this.$message.error("删除失败！")
          })
        }).catch(err => {
          this.$message.error("删除失败！")
        })
      }).catch(err => {
      })
    },
    deletePintuan(pintuanType) {
      let picture = pintuanType.picture;
      let filename = picture.substring(picture.indexOf("pintuanPictures"), picture.indexOf("?"));
      console.log("deletePintuan filename: ", filename)
      this.$confirm(`确认要删除'${pintuanType.name}'吗？`).then(res => {
        oss.deleteOne(filename).then(res => {
          delPintuan(pintuanType.pintuanId).then(res => {
            this.$message.success("删除成功！")
            this.getPintuanList(this.pintuanQueryParam)
          }).catch(err => {
            this.$message.error("删除失败！")
          })
        }).catch(err => {
          this.$message.error("删除失败！")
        })
      }).catch(err => {
      })
    }
  }
}
</script>

<style scoped>

.common-text {
  font-size: 16px;
}

>>> .el-card {
  margin-bottom: 15px;
}

.taocan-el-card {
  display: flex;
  padding: 5px;
}

.taocan-el-card img {
  border-radius: 8px;
}

.taocan-detail {
  height: 260px;
  display: flex;
  flex-direction: column;
  padding: 10px;
  margin-left: 20px;
}

.taocan-detail .taocan-title {
  flex-grow: 1;
  font-size: 18px;
  font-weight: 700;
}

.taocan-detail .taocan-desc {
  flex-grow: 1;
  padding-top: 5px;
}

.taocan-detail .taocan-duration {
  flex-grow: 1;
  padding-top: 5px;
}

.taocan-detail .taocan-price {
  flex-grow: 1;
  padding-top: 5px;
}

.taocan-detail .taocan-deposit {
  flex-grow: 1;
  padding-top: 5px;
}

.taocan-detail .taocan-button {
  flex-grow: 1;
  text-align: right;
  padding-top: 15px;
}

.pic-upload {
  margin-top: 5px;
  margin-left: 10px;
}

>>> .pic-upload .el-upload--picture-card {
  width: 80px;
  height: 80px;
  line-height: 80px;
  /*margin-top: 10px;*/
  /*margin-left: 10px;*/
}

>>> .pic-upload .el-upload-list__item {
  width: 80px;
  height: 80px;
}


</style>
